/*
 * @Title: 预订状态
 * @Created by: gsjPC 
 */
<template>
	<view>
		<comHeader :config="navConfig"/>
		<view class="ydStatus">
			<view class="statusBox">
				<view class="title">{{statusTit}}</view>
				<view class="tips">{{statusTips1}}</view>
				<view class="tips">{{statusTips2}}</view>
				<!-- 预订进度 -->
				<view v-if="this.ydStatus == 0">
					
				</view>
			</view>
			
			
		</view>
		<!-- 预订信息 -->
		<view class="ydWrapper">
			<view class="ydinfo">
				<view class="infoTop">
					<image src="/static/testglPic2.png"></image>
					<text>新韩小馆烤肉</text>
					<uni-icon type="arrowright" color="#333333" size="20"></uni-icon>
				</view>
				<view class="infoMid">
					<view>
						<text>时间人数</text>
						<text>今天11/21 12:00, 3人</text>
					</view>
					<view>
						<text>位置要求</text>
						<text>隔断散台</text>
					</view>
					<view>
						<text>联系方式</text>
						<text>珊先生  133 3367 3789</text>
					</view>
					<view class="midBtn">
						<view @tap="xgTc">修改订单</view>
						<view @tap="cancelDdTc">取消订单</view>
					</view>
				</view>
			</view>
			<!-- 附近推荐 -->
			<view class="nearTj">
				<view class="title">附近推荐</view>
				<view class="nearBox">
					<view class="nearFl">
						<image src="/static/testglPic2.png"></image>
						<view class="nearCon">
							<view class="title">大阪回转寿司</view>
							<view class="xing">
								<uni-rate 
								:value="4" 
								color="#999999" 
								active-color="#F4AC45"
								:size="18"
								@change="rateChange"></uni-rate>
							</view>
							<view class="pro">包间（1~4人）2小时</view>
							<view class="price">￥<text>88</text></view>
						</view>
					</view>
					<view class="distance">
						<view>沈阳路 2km</view>
					</view>
				</view>
			</view>
			
			<view class="nearTj tjTips">
				<view class="title">
					<text>遇到下列问题</text>
					<text>客服咨询 ></text>
				</view>
				<view class="quesList">
					<view 
					class="quesItem"
					v-for="(ques,index) in quesList"
					:key="index">
						{{ques.quess}}
					</view>
				</view>
			</view>
			<view class="botmBox" v-if="ydStatus !== 0">
				<view class="botmBtn">
					<view>{{ydStatus == 3 ? '再次预订' : '确认'}}</view>
				</view>
			</view>
		</view>
		</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	export default{
		components:{
			uniIcon,
			uniRate
		},
		data(){
			return{
				navConfig:{
					isFixed:false,
					comScroll:0,
					left:{
						text:'',
						isShowLeft:true,
						leftGobackColor:'#ffffff',
						leftTextColor:'',
					},
					mid:{
						isShowMid:false,
						text:''
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				quesList:[
					{quess:'包间是否收费'},
					{quess:'有没有WIFI'},
					{quess:'有没有儿童椅'},
					{quess:'查询商家电话'},
					{quess:'如何取消预订'},
				],
				ydStatus:4,//预订状态
				statusTit:'',//预订头部信息
				statusTips1:'',//预订补充信息1
				statusTips2:'',//预定补充信息2
			}
		},
		methods:{
			rateChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
			},
			cancelDdTc(){
				uni.showModal({
					content:'确定取消订单？',
					confirmColor:'#4A86D5',
					success:function(res){
						if(res.confirm){
							uni.navigateTo({
								url:'/pages/home/food/cancelReason'
							})
							console.log('用户点击确定');
						}else if(res.cancel){
							console.log('用户点击取消');
						}
					}
				})
			},
			xgTc(){
				uni.redirectTo({
					url:'/pages/home/food/yuding1'
				})
			}
		},
		onLoad(e) {
			console.log(e);
			// 订单待确认
			if(this.ydStatus == 0){
				this.statusTit = '订单待确认',
				this.statusTips1 = '联系商家确认中，预计5分钟内短信告知结果',
				this.statusTips2 = ''
			}
			// 预定成功
			else if(this.ydStatus == 1){
				this.statusTit = '预定成功',
				this.statusTips1 = '您已预约成功，请您尽快到店',
				this.statusTips2 = '座位最晚保留至12:30'
			}
			//预定失败
			else if(this.ydStatus == 2){
				this.statusTit = '预定失败',
				this.statusTips1 = '可以商家电话沟通，或再次预定',
				this.statusTips2 = ''
			}
			//订单已取消
			else if(this.ydStatus == 3){
				this.statusTit = '订单已取消',
				this.statusTips1 = '您取消了订单',
				this.statusTips2 = ''
			}
		}
	}
</script>

<style>
	.ydStatus{
		width: 100%;
		height: 530upx;
		background: linear-gradient(to top,#398CE1,#145FC1);
		border-top:1px solid #FFFFFF;
	}
	.statusBox{
		padding:131upx 50upx 0upx 50upx;
		color: #FFFFFF;
	}
	.statusBox .title{
		font-size:38upx;
		padding:20upx 0;
	}
	.tips{
		font-size: 26upx;
		color: #D4E7FF;
	}
	.ydWrapper{
		margin:0 22upx;
	}
	.ydinfo{
		width:100%;
		background: #FFFFFF;
		border-radius: 20upx;
		padding:28upx 25upx;
		box-sizing: border-box;
		margin-top:-180upx;
		box-shadow: 0px 0px 21px 0px rgba(5,36,72,0.16);
	}
	
	.infoTop{
		margin-bottom:36upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.infoTop image{
		width:60upx;
		height:60upx;
		border:20upx;
		margin-right:14upx;
	}
	.infoTop text{
		max-width: 520upx;
		color: #333333;
		font-size: 32upx;
		margin-right:30upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.infoMid view {
		line-height: 60upx;
	}
	.infoMid view text:first-child{
		font-size: 20upx;
		color: #666666;
		margin-right:40upx;
	}
	.infoMid view text:last-child{
		font-size: 26upx;
		color: #333333;
	}
	.midBtn{
		margin-top:34upx;
		display: flex;
		flex-direcion:row;
		justify-content:flex-end;
		margin-bottom: 10upx;
	}
	.midBtn view{
		width:146upx;
		height: 56upx;
		line-height:56upx;
		margin-left:24upx;
		font-size:26upx;
		color: #333333;
		border:1px solid #7D7D7D;
		border-radius:10upx;
		text-align: center;
	}
	
	.nearTj{
		width:100%;
		background: #FFFFFF;
		border-radius: 20upx;
		padding:28upx 25upx;
		box-sizing: border-box;
		margin-top:30upx;
		box-shadow: 0px 0px 21px 0px rgba(5,36,72,0.16);
	}
	.nearTj .title{
		color: #333333;
		font-size: 34upx;
	}
	.nearBox{
		margin-top: 30upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.nearBox image{
		width:156upx;
		height: 156upx;
		margin-right:20upx;
	}
	.nearFl{
		display: flex;
		flex-direction: row;
	}
	.nearCon .title{
		font-size: 30upx;
		color: #333333;
		max-width: 280upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.nearCon .pro{
		font-size: 22upx;
		color: #333333;
		max-width: 280upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.nearCon .price{
		font-size: 22upx;
		color: #BE2418;
	}
	.nearCon .price text{
		font-size: 28upx;
	}
	.distance{
		width:162upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #333333;		font-size:30upx
		}
	.tjTips{
		padding-bottom:120upx;
	}
	.tjTips .title{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.tjTips .title text:last-child{
		font-size: 22upx;
		color: #333333;
	}
	.quesList{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 30upx;
	}
	.quesItem{
		height: 53upx;
		line-height: 53upx;
		background:#F7F7F7;
		padding:0 20upx;
		color: #333333;
		font-size: 22upx;
		margin-bottom: 33upx;
		margin-right:39upx;
	}
	/* 底部按钮 */
	.botmBox{
		background: #FFFFFF;
		padding: 20upx 0;
		width: 100%;
		position: fixed;
		bottom:0upx;
		left: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.botmBtn{
		width:714upx;
		height:80upx;
		line-height:80upx;
		border-radius: 80upx;
		box-shadow: 0px 0px 27px 0px rgba(5,36,72,0.15);
		background: linear-gradient(to bottom,#4C89D8,#2A60BA);
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding:10upx 0upx;
		box-sizing: border-box;
		text-align: center;
	}
	.botmBtn > view{
		font-size: 28upx;
	}
</style>
